﻿
<div class="container dicomWeb-js-viewer">

    @*<input type="checkbox" id="toggleModalityLUT">Apply Modality LUT
    <input type="checkbox" id="toggleVOILUT">Apply VOI LUT
    <br>*@
    <div class="row">
        <div class="alert alert-info alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             To view an image Use the "Query & Retrieve" tab to search for an instance then click on the "View" button.
            The viewer uses WADO-URI to retrieve DICOM part 10 format from the <a href="https://github.com/DICOMcloud/DICOMcloud">DICOMcloud WADO Server</a>.
        </div>
        <div class="alert alert-warning alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            The demo is using <a href="https://github.com/chafey/cornerstone" class="alert-link" target="_blank">"the Cornerstone viewer"</a> and the <a class="alert-link" href="https://github.com/chafey/cornerstoneWADOImageLoader" target="_blank">cornerstoneWADOImageLoader</a> 
            to retrieve the DIOCM instances and load them into the viewer. 
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            @Html.Partial("_CopyImageUrl")
            <div style="width:100%;height:512px;position:relative;color: white;display:inline-block;border-style:solid;border-color:black;" oncontextmenu="return false" class="disable-selection noIbar" unselectable="on" onselectstart="return false;" onmousedown="return false;">
                <div id="dicomImage" style="width:100%;height:512px;top:0px;left:0px;">

                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="control-group">
                        <label class="control-label">Default Button:</label>
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn btn-primary active">
                                <input type="radio" name="defaultButtonTool" value="WL" autocomplete="off" checked>W/L
                            </label>
                            <label class="btn btn-primary">
                                <input type="radio" name="defaultButtonTool" value="Stack" autocomplete="off">Stack
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="control-group" >
                        <button type="button" class="btn btn-sm btn-success prevtSer glyphicon glyphicon-backward" >
                        </button>
                        <label class="control-label seriesCount"></label>
                        <button type="button" class="btn btn-sm btn-success nextSer glyphicon glyphicon-forward">
                        </button>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="control-group">
                        <input type="range" min="1" max="1" value="1" class="instance-slider">
                        <label class="control-label instance-count"></label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <span>Select Transfer Syntax:</span>
            <select class="form-control" id="SelectedTransferSyntax" name="SelectedTransferSyntax" style="width:auto;display:inline-block">
                <option selected="selected" value="1.2.840.10008.1.2.1">Explicit VR Little Endian (default)</option>
                <option value="1.2.840.10008.1.2">Implicit VR Little Endian</option>
                <option value="1.2.840.10008.1.2.2">Explicit VR Big Endian</option>

                <option value="1.2.840.10008.1.2.5">RLE Lossless</option>
                <option value="1.2.840.10008.1.2.4.50">JPEG Baseline (Process 1 - 8 bit)</option>
                <option value="1.2.840.10008.1.2.4.51">JPEG Baseline (Processes 2 & 4 - 12 bit)</option>
                <option value="1.2.840.10008.1.2.4.57">JPEG Lossless, Nonhierarchical (Processes 14)</option>
                <option value="1.2.840.10008.1.2.4.70">JPEG Lossless, Nonhierarchical (Processes 14 [Selection 1])</option>
                <option value="1.2.840.10008.1.2.4.80">JPEG-LS Lossless Image Compression</option>
                <option value="1.2.840.10008.1.2.4.81">JPEG-LS Lossy (Near-Lossless) Image Compression</option>
                <option value="1.2.840.10008.1.2.4.90">JPEG 2000 Image Compression (Lossless Only)</option>
                <option value="1.2.840.10008.1.2.4.91">JPEG 2000 Image Compression</option>
            </select>

            <span>Transfer Syntax: </span><span id="transferSyntax"></span><br>
            <span>SOP Class: </span><span id="sopClass"></span><br>
            <span>Samples Per Pixel: </span><span id="samplesPerPixel"></span><br>
            <span>Photometric Interpretation: </span><span id="photometricInterpretation"></span><br>
            <span>Number Of Frames: </span><span id="numberOfFrames"></span><br>
            <span>Planar Configuration: </span><span id="planarConfiguration"></span><br>
            <span>Rows: </span><span id="rows"></span><br>
            <span>Columns: </span><span id="columns"></span><br>
            <span>Pixel Spacing: </span><span id="pixelSpacing"></span><br>
            <span>Bits Allocated: </span><span id="bitsAllocated"></span><br>
            <span>Bits Stored: </span><span id="bitsStored"></span><br>
            <span>High Bit: </span><span id="highBit"></span><br>
            <span>Pixel Representation: </span><span id="pixelRepresentation"></span><br>
            <span>WindowCenter: </span><span id="windowCenter"></span><br>
            <span>WindowWidth: </span><span id="windowWidth"></span><br>
            <span>RescaleIntercept: </span><span id="rescaleIntercept"></span><br>
            <span>RescaleSlope: </span><span id="rescaleSlope"></span><br>
            <span>Basic Offset Table Entries: </span><span id="basicOffsetTable"></span><br>
            <span>Fragments: </span><span id="fragments"></span><br>
            <span>Max Stored Pixel Value: </span><span id="minStoredPixelValue"></span><br>
            <span>Min Stored Pixel Value: </span><span id="maxStoredPixelValue"></span><br>
            <span>Load Time: </span><span id="loadTime"></span><br>
        </div>
    </div>
</div>
